<template>
	<div class="login-page">
		<div class="wrap">
			<img alt="zp logo" src="../assets/img/logo.svg" />
			<h3>欢迎来到管理后台</h3>
			<h4>登陆</h4>
			<form action="/">
				<input placeholder="邮箱" />
				<input placeholder="密码" type="password" />
				<button class="gradient-primary">登陆</button>
				<router-link class="forget" to="/forget">忘记密码？</router-link>
			</form>
		</div>
	</div>
</template>

<script>
</script>

<style lang="scss" scoped>
	@import '../assets/css/base.scss';
	.login-page{
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		.wrap{
			padding: 40px;
			background: #fff;
			width: 410px;
			max-width: 100%;
			box-sizing: border-box;
			img{
				height: 30px;
			}
			h3{
				margin: 30px 0 10px;
			}
			h4{
				font-weight: 400;
			}
		}
		input, button{
			width: 100%;
			margin: 30px 0 0;
			padding: 1.2em;
			box-sizing: border-box;
		}
		input{
			border: solid 1px #eee;
		}
		button{
			border: 0;
			font-weight: bold;
			border-radius: 5px;
			cursor: pointer
		}
		.forget{
			margin-top: 30px;
			font-size: 12px;
			display: block;
			text-align: center;
			&:hover{
				color: $primary;
			}
		}
	}
</style>
